<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        legend: { show: false },
        tooltip: { trigger: "item" },
        series: [
            {
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: { show: false },
                progress: { show: true, roundCap: true, itemStyle: { color: "#e5608c" } },
                axisLine: {
                    lineStyle: { color: [[1, "#d9d3e6"]] },
                },
                axisLabel: { show: false },
                splitLine: { show: false },
                axisTick: { show: false },
                data: [{ name: "完成率(%)", value: ((6481 / 13000) * 100).toFixed(2) }],
                title: {
                    fontSize: 12,
                    offsetCenter: [0, "30%"],
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: 24,
                    formatter: "{value}",
                    offsetCenter: [0, "-10%"],
                },
            },
        ],
    },
};
const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    chart.instance = echarts.init(oChart.value);
    chart.instance.setOption(chart.option);
});
</script>

<template>
    <section>
        <cite>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-earth-full"></use></svg>
            <h1>年产量目标</h1>
        </cite>
        <div class="content">
            <div class="top">
                <h2>较去年本月相比</h2>
                <p>
                    <span>同比：8%</span>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangsheng"></use></svg>
                </p>
            </div>
            <div class="center">
                <div class="center-left">
                    <div class="bg">
                        <!-- <svg class="icon" aria-hidden="true"><use xlink:href="#icon-earth-full"></use></svg> -->
                    </div>
                    <div ref="oChart" class="chart"></div>
                </div>
                <ul>
                    <li>
                        <span>当前产量(吨)</span>
                        <b>6481</b>
                    </li>
                    <li>
                        <span>目标产量(吨)</span>
                        <b>13000</b>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <li>
                    <span>前年产量(吨)</span>
                    <b>12100</b>
                </li>
                <li>
                    <span>去年产量(吨)</span>
                    <b>10183</b>
                </li>
            </div>
        </div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
section {
    .content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        row-gap: 10px;
        .top {
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            h2 {
                font-size: 16px;
                color: #4a5a73;
            }
            p {
                display: flex;
                align-items: center;
                span {
                    font-size: 14px;
                    color: #4a5a73;
                }
                .icon {
                    margin-left: 6px;
                    color: #199f8c;
                    font-size: 22px;
                }
            }
        }
        .center {
            margin: 0 10px;
            display: flex;
            align-items: center;
            background-color: #cae3f8;
            box-shadow: 0 0 3px 1px #fff;
            border-radius: 10px;
            .center-left {
                position: relative;
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .bg {
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: radial-gradient(circle at 50% 50%, var(--darken-primary-color) 0%, var(--darken-primary-color-alpha));
                    .icon {
                        color: var(--primary-color);
                        font-size: 62px;
                    }
                }
                .chart {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
            ul {
                flex: 1;
                display: flex;
                flex-direction: column;
                row-gap: 4px;
                li {
                    box-sizing: border-box;
                    padding: 4px 10px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    column-gap: 4px;
                    span {
                        flex: 1;
                        color: #666;
                        font-size: 14px;
                    }
                    b {
                        flex-shrink: 0;
                        font-weight: bold;
                        color: #5b8092;
                        font-size: 18px;
                    }
                }
            }
        }
        .bottom {
            padding: 0 10px;
            display: flex;
            align-items: center;
            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                span {
                    color: #333;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    &::before {
                        content: "";
                        margin-right: 4px;
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background-color: #5b8092;
                    }
                }
                b {
                    color: #57a3d3;
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
